<style lang="scss">
  @import "~@/styles/base";

  .add-timing {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0,0,0,.3);
    .timing-body {
      position: absolute;
      bottom: 0;
      width: 100%;
      height:rpx(550);
      background-color: #fff;
      padding-left: rpx(55);
      padding-right: rpx(55);
    }
    .time-wrap {
      display: flex;
      align-items: center;
      padding-top: rpx(60);
      padding-bottom: rpx(60);
      border-bottom: rpx(1) solid #dbe5f0;
      .title {
        margin-right: rpx(100);
        font-size: rpx(32);
        color: #404953;
      }
      .time-list {
        width: rpx(400);
        height: rpx(150);
        .time {
          height: rpx(60);
          line-height: rpx(60);
          text-align: center;
        }
      }
      .active {
        color: $main-color;
      }
      .separator {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: rpx(70);
        padding-right: rpx(70);
        font-size: rpx(40);
        color: $main-color;
      }
    }
    .day-list-wrap {
      display: flex;
      align-items: center;
      height: rpx(135);
      border-bottom: rpx(1) solid #dbe5f0;
      .title {
        font-size: rpx(32);
        color: #404953;
        width: rpx(80);
        white-space: nowrap;
      }
      .day-list {
        display: flex;
        align-items: center;
        margin-left: rpx(100);
        .day {
          margin-right: rpx(10);
          width: rpx(60);
          height: rpx(60);
          line-height: rpx(60);
          font-size: rpx(28);
          color: $light-black;
          text-align: center;
          border-radius: 50%;
          &.active {
            background-color: $main-color;
            color: #fff;
          }
        }
      }
    }
    .btn-list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: rpx(40);
      .f-btn {
        width: rpx(288);
        height: rpx(76);
        line-height: rpx(76);
        text-align: center;
        background-color: $light-black;
        color: #fff;
        box-shadow: 0 rpx(3) rpx(9) rgba(92, 163, 241, 0.32);
        border-radius: rpx(38);
        font-size: rpx(26);
        &.active {
          background-color: $main-color;
          box-shadow: 0 rpx(3) rpx(9) rgba(92, 163, 241, 0.32);
        }
      }
    }
  }
</style>
<template>
  <div class="add-timing" v-if="isShow">
    <div class="timing-body">
      <div class="time-wrap">
        <div class="title">时间</div>
        <picker-view @change="changeTime" class="time-list" indicator-class="active">
          <picker-view-column>
            <div class="time" v-for="(hour,index) in hours" :key="index">{{hour.text}}</div>
          </picker-view-column>
          <div class="separator">:</div>
          <picker-view-column>
            <div class="time" v-for="(minute,index) in minutes" :key="index">{{minute.text}}</div>
          </picker-view-column>
        </picker-view>
      </div>
      <div class="day-list-wrap">
        <div class="title">重复</div>
        <ul class="day-list">
          <li class="day" @click="changeSelect(day)" :class="{active: day.selected}" v-for="(day,index) in dayList" :key="index">{{day.text}}</li>
        </ul>
      </div>
      <ul class="btn-list">
        <li class="f-btn">取消</li>
        <li class="f-btn active" @click="confirm">确定</li>
      </ul>
    </div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        isShow: false,
        hours: [],
        minutes: [],
        dayList: [{
          id: 1,
          text: '一',
          selected: true
        },{
          id: 2,
          text: '二',
          selected: false
        },{
          id: 3,
          text: '三',
          selected: false
        },{
          id: 4,
          text: '四',
          selected: false
        },{
          id: 5,
          text: '五',
          selected: false
        },{
          id: 6,
          text: '六',
          selected: false
        },{
          id: 0,
          text: '日',
          selected: false
        }],
        times: [0, 0]
      };
    },
    components: {},
    methods: {
      changeSelect(day){
        day.selected = !day.selected;
      },
      changeTime(e){
        this.times = e.mp.detail.value;
      },
      show(){
        this.isShow = true;
      },
      confirm(){
        const bytes = [1];
        bytes.push(parseInt(this.times[0]))
        bytes.push(parseInt(this.times[1]))
        let dayBytes = [];
        this.dayList.forEach(day => {
          dayBytes[day.id] = day.selected ? 1 : 0;
        })
        dayBytes.push(0);
        bytes.push(parseInt(dayBytes.join(''), 2));
        this.isShow = false;
        this.$emit('success', bytes);
      }
    },
    mounted(){
      const hours = [];
      for(let i=0; i<24; i++){
        hours.push({
          id: i,
          text: i < 10 ? `0${i}` : i,
        })
      }
      this.hours = hours;
      const minutes = [];
      for(let i=0; i<60; i++){
        minutes.push({
          id: i,
          text: i < 10 ? `0${i}` : i,
        })
      }
      this.minutes = minutes;
    }
  };
</script>
